/* 滚动条样式，只支持 Webkit 内核浏览器，如 Chrome, Safari */
::-webkit-scrollbar {
    width:  5px;
    height: 5px;
}
::-webkit-scrollbar-track {
    background: #ddd;
}
::-webkit-scrollbar-thumb {
    background: #888;
}

/* 文件类型图标样式 */
.file-type-other {
    background-image: url(/static-p/img/file-type/other.png);
}
.file-type-png {
    background-image: url(/static-p/img/file-type/jpg.png);
}
.file-type-jpg {
    background-image: url(/static-p/img/file-type/jpg.png);
}
.file-type-gif {
    background-image: url(/static-p/img/file-type/gif.png);
}
.file-type-pdf {
    background-image: url(/static-p/img/file-type/pdf.png);
}
.file-type-word {
    background-image: url(/static-p/img/file-type/word.png);
}
.file-type-doc {
    background-image: url(/static-p/img/file-type/word.png);
}
.file-type-docx {
    background-image: url(/static-p/img/file-type/word.png);
}
.file-type-ppt {
    background-image: url(/static-p/img/file-type/ppt.png);
}
.file-type-pptx {
    background-image: url(/static-p/img/file-type/ppt.png);
}
.file-type-excel {
    background-image: url(/static-p/img/file-type/excel.png);
}
.file-type-xlsx {
    background-image: url(/static-p/img/file-type/excel.png);
}
.file-type-xls {
    background-image: url(/static-p/img/file-type/excel.png);
}
.file-type-swf {
    background-image: url(/static-p/img/file-type/swf.png);
}
.file-type-mp4 {
    background-image: url(/static-p/img/file-type/mp4.png);
}
.file-type-mp3 {
    background-image: url(/static-p/img/file-type/mp3.png);
}
.file-type-zip {
    background-image: url(/static-p/img/file-type/zip.png);
}
.file-type-rar {
    background-image: url(/static-p/img/file-type/zip.png);
}
.file-type-7z {
    background-image: url(/static-p/img/file-type/7z.png);
}
.file-type-txt {
    background-image: url(/static-p/img/file-type/txt.png);
}

/* 弹簧拉伸占满剩余空间: <div class="stretch"></div> */
.stretch {
    flex: 1;
}

/* 文本不换行显示 */
.nobreak {
    word-break: keep-all;
    white-space: nowrap;
}

/* 文本只显示在一行，溢出时显示三个小点: elide 是省略的意思 */
.elide {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: default;
}

/* Vue 的样式 */
.ivu-modal-footer button {
    min-width: 90px;
}

.ivu-btn-small {
    font-size: 12px !important;
}

.ivu-tag {
    cursor: default;
}

.ivu-modal-wrap .ivu-modal {
    margin-bottom: 40px;
}

/* block 的 Poptip: <Poptip trigger="hover" transfer width="500" class="poptip-block"> */
.ivu-poptip.poptip-block, .ivu-poptip.poptip-block .ivu-poptip-rel {
    display: block;
}

/* 可点击的 Icon */
.ivu-icon.clickable:hover {
    color: #2d8cf0 !important;
    cursor: pointer;
    transition: all .6s;
}

/* 布局 */
.two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.three-column {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.four-column {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* 有搜索、分页、列表的页面的布局 */
.list-page {
    display: grid;
    grid-gap: 24px;
}

.list-page-toolbar-top {
    display: grid;
    grid-template-columns: 400px max-content;
    justify-content: space-between;
    align-items: center;
}

.list-page-toolbar-bottom {
    display: grid;
    justify-content: center;
    align-items: center;
}

/* 表格里按钮列的按钮之间的间隔 */
.column-buttons button:not(:first-child) {
    margin-left: 8px;
}

/* 使用 Table 作为 body 的 Card，去掉 padding 效果好一些: <Card class="card-with-table-body" dis-hover> */
.card-with-table-body .ivu-card-body {
    padding: 0;
}
